<template>
  <div class="about" v-cloak>
      <h1 v-if="flag">你好</h1>
      <h1 v-else>你不好</h1>
      <h1 v-show="flag">通过css的display属性改变元素的显示隐藏</h1>
      <input type="checkbox" v-model="flag">
      <!-- v-bind:属性="属性值"  简写： -->
      <a :href="url">百度</a>
      <!-- <img :src="数据" alt=""> -->
       <div :class="flag?'active':''">11</div> 
       <div :class="[mm,url]">22</div> 
       <div :class="{'active':flag,'kk':url}">22</div> 
       <!-- v-on指令 @事件="事件函数" -->
       <ul>
         <li v-for="(item,index) in arr" :key="index">
           <span>{{item.name}}</span> -----<span>{{item.date}}</span>
         </li>       
       </ul>
       <!-- v-pre -->
       <div v-pre> {{让内容原样输出 不编译}} </div>
       <div v-html="myhtml"></div>
       <!--  -->
       <h1 v-myif="flag">成年</h1>
       <h1>
         {{age | double }}
       </h1>
  </div>
</template>
<script>
export default {
  data(){
    return{
      age:"18",
      myhtml:"<h1>我是h1标签</h1>",
      flag:false,
      mm:"ccc",
      fristname:"zhang",
      lastname:"san",
      url:"http://baidu.com",
      arr:[{
        name:"喝酒",date:"除夕"
      },{
        name:"吃肉",date:"初一"
      },
      {
        name:"打牌",date:"初二"
      }
      ]
    }
  },
  // 创建自定义指令

  directives:{
      "myif":{
        inserted(el,binding){//元素首次渲染执行
          // el当前元素  binding.value 指令后的值
          if(binding.value){
            el.style.display="block";
          }else{
             el.style.display="none";
          }
        }
      }
  },
  filters:{ //自定义过滤器
      "double":function(val){
          return val*2
      }
  },
  computed:{
    allname: { //计算属性对象写法
          get() {
              return this.fristname + this.lastname
          },
          set(newVal) { //拦截到对计算属性的赋值
              console.log(newVal)
              var names = newVal.split(" ");
              this.fristname = names[0];
              this.lastname = names[1];
          }
      }
  }
}
</script>
<style lang="less">
  [v-cloak]{
    display: none;//v-cloak 隐藏未编译好的元素
  }

</style>
